<template>
  <div>
    <ListHead />
    <el-main>
      <div class="edit-step3">
        <div class="main">
          <h2>店铺信息</h2>
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="应用名称" prop="app_name">
              <el-input
                v-model="ruleForm.app_name"
                class="inputW"
                placeholder="请填写您的商户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="应用行业" prop="industry">
              <el-select
                v-model="ruleForm.industry"
                class="inputW"
                placeholder="请选择商户行业"
              >
                <el-option
                  v-for="(industry, index) in industrys"
                  :key="index"
                  :label="industry.industry_name"
                  :value="industry.open_id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="应用logo" prop="app_cover" class="upload">
              <img ref="show_img" />
              <label class="upload-change">
                <input
                  v-show="false"
                  ref="changeUrl"
                  type="file"
                  name="changeUrl"
                  @change="changeUrl"
                />上传图片
              </label>
            </el-form-item>
            <el-form-item label="应用简介" prop="desc">
              <el-input
                v-model="ruleForm.desc"
                class="inputW"
                type="textarea"
                :rows="6"
                placeholder="最多不超过500字"
                maxlength="500"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="edit-btn" @click="submitForm"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
import { STEP3 } from "./service";

export default {
  components: {
    ListHead: () => import("publicCom/ListHead")
  },
  data() {
    return {
      file: "",
      industrys: [{ industry_name: "网络", open_id: "4" }],
      ruleForm: {
        app_name: "",
        app_cover: "",
        industry: "",
        desc: ""
      },
      rules: {
        app_name: [
          { required: true, message: "请填写您的商户名", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        app_cover: [{ required: true, message: "请选择logo", trigger: "blur" }],
        industry: [
          { required: true, message: "请选择商户行业", trigger: "blur" }
        ],
        desc: [{ required: true, message: "请填写简介", trigger: "blur" }]
      }
    };
  },
  created() {
    if (!this.$route.params.group_id) {
      this.$router.push({ name: "step2" });
    }
  },
  methods: {
    changeUrl(e) {
      let self = this;
      var file = e.target.files[0];
      this.file = file;
      this.ruleForm.app_cover = file;
      const fr = new FileReader();
      fr.readAsDataURL(file);
      fr.onloadend = function(e) {
        self.$refs.show_img.src = e.target.result;
      };
    },
    async submitForm() {
      await this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          let formdata = new FormData();
          formdata.append("_token", this.$store.state._token);
          formdata.append("group_id", this.$route.params.group_id);
          formdata.append("status", "authorized");
          formdata.append("app_cover", this.file);
          formdata.append("app_name", this.ruleForm.app_name);
          STEP3(formdata).then(({ code, msg }) => {
            if (code === 200) {
              this.$router.push({ name: "step1" });
              this.$message({
                message: "创建成功",
                type: "success"
              });
            } else {
              if (msg !== "full") {
                this.$message({
                  message: msg,
                  type: "error"
                });
              } else {
                this.msg =
                  "当前权限为体验版本，为期七天（最多创建3个应用）。如需开通权限请联系中天客服是否继续创建？";
                this.dialogVisible = true;
              }
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.edit-step3 {
  background: #fff;
  padding: 65px 150px;
  -moz-box-shadow: 0px 0px 10px #e3e3e3;
  -webkit-box-shadow: 0px 0px 10px #e3e3e3;
  box-shadow: 0px 0px 10px #e3e3e3;
  box-sizing: border-box;
  border-radius: 6px;
  .main {
    width: 50%;
    margin: 0 auto;
    h2 {
      margin: 0 0 50px 40px;
    }
    .inputW {
      width: 80%;
    }
    .edit-btn {
      border: 1px solid #1da2c8;
      border-radius: 100px;
      width: 150px;
      margin: 30px 27%;
      height: 40px;
      color: #fff;
    }
    .upload {
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        float: left;
      }
      .upload-img {
        float: right;
      }
      .upload-change {
        width: 64px;
        float: left;
        margin-left: 30px;
        color: #1da2c8;
        cursor: pointer;
        input {
          width: 0;
        }
      }
    }
  }
}
</style>
